<template>
	<view class="strategy-card">
		<!-- 工作模式（按钮组） -->
		<view class="row">
			<text class="label">工作模式：</text>
			<view class="mode-buttons">
				<button v-for="m in modeOptions" :key="m.value"
					:class="['mode-btn', { active: strategy.mode === m.value }]" @click="setMode(m.value)">
					{{ m.label }}
				</button>
			</view>
		</view>

		<!-- 工作状态（按钮组） -->
		<view class="row">
			<text class="label">工作状态：</text>
			<view class="status-buttons">
				<button :class="['status-btn', { active: strategy.status === 'running' }]"
					@click="setStatus('running')">
					启动
				</button>
				<button :class="['status-btn', { active: strategy.status === 'stopped' }]"
					@click="setStatus('stopped')">
					停止
				</button>
			</view>
		</view>

		<!-- EC / PH -->
		<view class="row">
			<text class="label">EC：</text>
			<text class="value">{{ strategy.ec }}</text>
			<text class="label">PH：</text>
			<text class="value">{{ strategy.ph }}</text>
		</view>
		
		<navigator url="/pages/control/ferStrategy/ferSetting">
			自动工作参数
		</navigator>

		<!-- 灌区信息列表 -->
		<view class="section">
			<text class="section-title">灌区信息</text>
			<view v-for="area in strategy.irrigationAreas" :key="area.id" class="area-card">
				<view class="row"><text class="label">名称：</text><text class="value">{{ area.name }}</text></view>
				<view class="row"><text class="label">方式：</text><text class="value">{{ area.method }}</text></view>
				<view class="row"><text class="label">肥料：</text><text class="value">{{ area.fertilizer }}</text></view>
				<view class="row"><text class="label">A肥量：</text><text class="value">{{ area.amountA }}</text></view>
				<view class="row"><text class="label">B肥量：</text><text class="value">{{ area.amountB }}</text></view>
				<view class="row"><text class="label">C肥量：</text><text class="value">{{ area.amountC }}</text></view>
				<view class="row"><text class="label">下次灌溉：</text><text class="value">{{ area.nextTime }}</text></view>
				<text
				  class="value"
				  :class="area.confirmed ? 'confirmed' : 'unconfirmed'"
				>
				  {{ area.confirmed ? "已确认" : "未确认" }}
				</text>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const deviceId = ref(null)
	const deviceName = ref("")

	// 工作模式选项
	const modeOptions = [{
			value: "local_manual",
			label: "本地手动"
		},
		{
			value: "local_auto",
			label: "本地自动"
		},
		{
			value: "remote_manual",
			label: "远程手动"
		}
	]

	const strategy = ref({
		mode: "local_manual",
		status: "running",
		ec: 1.8,
		ph: 6.5,
		irrigationAreas: []
	})

	// 页面加载
	onLoad(async (options) => {
		deviceId.value = options.id
		deviceName.value = options.name

		uni.setNavigationBarTitle({
			title: deviceName.value + "策略设置"
		})

		// 模拟查询设备信息
		strategy.value.irrigationAreas = [{
				id: 1,
				name: "一区",
				method: "滴灌",
				fertilizer: "复合肥",
				amountA: 20,
				amountB: 15,
				amountC: 10,
				nextTime: "2025-11-25 08:00",
				confirmed: true
			},
			{
				id: 2,
				name: "二区",
				method: "喷灌",
				fertilizer: "氮肥",
				amountA: 30,
				amountB: 20,
				amountC: 5,
				nextTime: "2025-11-26 09:00",
				confirmed: false
			}
		]
	})

	// 设置工作模式
	function setMode(value) {
		strategy.value.mode = value
	}

	// 设置工作状态
	function setStatus(value) {
		strategy.value.status = value
	}
</script>

<style scoped lang="scss">
	.strategy-card {
		padding: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.row {
			display: flex;
			justify-content: space-between;
			padding: 8rpx 0;

			.label {
				font-size: 24rpx;
				color: #666;
			}

			.value {
				font-size: 24rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.mode-buttons,
		.status-buttons {
			display: flex;
			gap: 12rpx;

			.mode-btn,
			.status-btn {
				padding: 8rpx 16rpx;
				font-size: 22rpx;
				border-radius: 6rpx;
				background: #eee;
				color: #333;

				&.active {
					background: #2196f3;
					color: #fff;
				}
			}
		}

		.section {
			margin-top: 16rpx;

			.section-title {
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
				color: #2196f3;
			}

			.area-card {
				margin-bottom: 12rpx;
				padding: 12rpx;
				border: 1px solid #eee;
				border-radius: 6rpx;
				background: #fafafa;
			}
		}
	}
</style>